<template>
  <div class="test">
    <div class="table-wrapper">
      <div class="table-content">
        <el-table
          ref="table"
          row-key="project_id"
          :data="tableData"
          height="100%"
          border
          stripe
          :tree-props="{ children: 'children' }"
        >
          <!-- <el-table-column
            label="序号"
            align="center"
            type="index"
            width="50"
            :index="indexMethod"
          ></el-table-column> -->
          <!-- <el-table-column prop="" label="项目名称" min-width="300">
            <template slot-scope="scope">
              <label v-if="scope.row.nodedeep == 0">
                {{ scope.row.project_name }}
                <span
                  class="is-bind"
                  v-if="scope.row.children && scope.row.children.length > 0"
                >
                  【 打包项目 】
                </span>
              </label>
              <div v-if="scope.row.nodedeep == 1" class="child-project">
                <div class="dot"></div>
                <span>
                  {{ scope.row.project_name }}
                </span>
              </div>
            </template>
          </el-table-column> -->

          <el-table-column
            v-for="(col, index) in columns"
            :prop="col.prop"
            :key="'bs_' + index"
            :label="col.label"
            :width="col.width"
            :min-width="col.minWidth || '0'"
            :align="col.align || 'center'"
            :fixed="col.fixed"
          >
          </el-table-column>

          <el-table-column
            label="操作"
            align="center"
            :width="150"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                v-if="!scope.row.hasChildren"
                type="primary"
                size="mini"
                @click="
                  linkTo(
                    `majorProjectPromotion/progressDetails/${scope.row.project_id}/${queryParams.year}/${queryParams.month}/0`
                  )
                "
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page-wrapper">
        <Pagination
          :total="count"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="pageChange"
        ></Pagination>
      </div>
    </div>
  </div>
</template>

<script>
import BaseTable from "@/components/Common/BaseTable.vue";
import OperateCommon from "@/components/Common/OperateCommon.vue";
import LinkTo from "@/mixins/LinkTo";
import {
  getProgressCondition,
  getProgressList,
} from "@/api/MajorProjectPromotion/Index";
import commonList from "@/mixins/commonList";
import Pagination from "@/components/Common/Pagination.vue";
export default {
  mixins: [LinkTo, commonList],
  components: { BaseTable, OperateCommon, Pagination },
  data() {
    return {
      columns: columns,
      tableData: [
        {
          fid: "0",
          responsible_unit_id: "82",
          project_id: "150",
          children: [
            {
              fid: "0",
              responsible_unit_id: "82",
              project_id: "151",
              children: null,
              build_kind: "续建",
              nodedeep: 0,
              report_status: "",
              project_name: "新型智慧城市建设工程",
            },
          ],
          build_kind: "续建",
          nodedeep: 0,
          report_status: "",
          project_name: "新型智慧城市建设工程",
        },
      ],
      count: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        project_name: "",
        year: "",
        month: "",
        report_status: "",
      },
    };
  },
  methods: {
    async initCondition() {
      await getProgressCondition().then((res) => {
        if (res.code == 0 && res.data) {
          this.queryParams.year = res.data.cycle_year + "";
          this.queryParams.month = res.data.cycle_month + "";
        }
      });
    },
    initData() {
      getProgressList(this.queryParams).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data;
          this.count = res.num;
        }
      });
    },
    pageChange(val) {
      this.queryParams.pageNum = val.page;
      this.queryParams.pageSize = val.limit;

      // this.initData();
    },
    indexMethod(index) {
      return (
        (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index + 1
      );
    },
  },
  created() {
    // this.initCondition().then(() => {
    //   this.initData();
    // });
  },
};

const columns = [
  {
    prop: "project_name",
    label: "项目名称",
    width: "",
    minWidth: "300",
    align: "",
  },
  {
    prop: "build_kind",
    label: "建设性质",
    width: "",
    minWidth: "100",
    align: "",
  },
  // {
  //   prop: "",
  //   label: "进度周期",
  //   width: "",
  //   minWidth: "100",
  //   align: "",
  // },
  {
    prop: "report_status_text",
    label: "上报状态",
    width: "",
    minWidth: "100",
    align: "",
  },
];
</script> 

<style lang="scss" scoped>
.test {
  height: 100%;
}

.page-wrapper {
  height: 60px;
  display: flex;
  align-items: center;
}

.table-content {
  height: calc(100% - 60px);
}

.is-bind {
  font-size: 16px;
  font-weight: 600;
  color: #000;
}

.child-project {
  display: inline-block;
  > .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: skyblue;
    margin-right: 10px;
  }
}
</style>
